/*------------------------------------*\
    #PATTERN CATEGORY
\*------------------------------------*/

/**
* Pattern Category
* 1) This appears in the index page and delineates a major section,
*    such as "global", "blocks", "etc".
* 2) The category contains a title and optional description
*/
.pl-c-category {
  margin-top: 6rem;
  font-family: $pl-font !important;

  &:first-of-type {
    margin-top: 2rem;
  }

  & + & {
    margin-top: 2rem;
  }
}

/**
* Pattern Category Title
*/
.pl-c-category__title {
  font-size: 1.4rem !important;
  color: $pl-color-gray-87 !important;
  margin: 0 0 0.2rem;
  text-transform: capitalize;

  &:hover {
    color: $pl-color-gray-70 !important;
  }
}

/**
 * Pattern Category Link 
 */
.pl-c-category__title-link {
  transition: color $pl-animate-quick ease-out;
  color: inherit;
}

/**
* Pattern Category Description
* 1) This is an optional description that sits below the category title.
* 2) Hide the pattern category description is it's empty
*/
.pl-c-category__description {
  font-size: $pl-font-size-sm-2;
  line-height: 1.5;
  max-width: 30rem;

  &:empty {
    display: none; /* 2 */
  }
}
